import React, { forwardRef, useState, useEffect } from "react";
import { Form, Input, Select } from "antd";
const { Option } = Select;
const UserForm = forwardRef((props, ref) => {
  const [isDisable, setisDisable] = useState(false);
  useEffect(() => {
    setisDisable(props.isUpdataDisable);
  }, [props.isUpdataDisable]);
  const { roleId, region } = JSON.parse(localStorage.getItem("token"));
  const roleObj = {
    1: "superadmin",
    2: "admin",
    3: "editor",
  };
  const checkRegionDisabled = (item) => {
    if (props.isupdata) {
      if (roleObj[roleId] === "superadmin") {
        return false;
      } else {
        return true;
      }
    } else {
      if (roleObj[roleId] === "superadmin") {
        return false;
      } else {
        return item.value !== region;
      }
    }
  };

  const checkRoleDisabled = (item) => {
    if (props.isupdata) {
      if (roleObj[roleId] === "superadmin") {
        return false;
      } else {
        return true;
      }
    } else {
      if (roleObj[roleId] === "superadmin") {
        return false;
      } else {
        return roleObj[item.id] !== "editor";
      }
    }
  };

  return (
    <Form
      ref={ref}
      layout="vertical"
      name="form_in_modal"
      initialValues={{
        modifier: "public",
      }}
    >
      <Form.Item
        name="username"
        label="用户名"
        rules={[
          {
            required: true,
            message: "Please input the title of collection!",
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="密码"
        rules={[
          {
            required: true,
            message: "Please input the title of collection!",
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="region"
        label="地区"
        rules={
          isDisable
            ? []
            : [
                {
                  required: true,
                  message: "Please input the title of collection!",
                },
              ]
        }
      >
        <Select allowClear disabled={isDisable}>
          {props.region.map((item) => (
            <Option
              value={item.value}
              key={item.id}
              disabled={checkRegionDisabled(item)}
            ></Option>
          ))}
        </Select>
      </Form.Item>

      <Form.Item
        name="roleId"
        label="角色"
        rules={[
          {
            required: true,
            message: "Please input the title of collection!",
          },
        ]}
      >
        <Select
          allowClear
          disabled={isDisable}
          onChange={(value) => {
            if (value === 1) {
              setisDisable(true);
              ref.current.setFieldsValue({
                region: "",
              });
            } else {
              setisDisable(false);
            }
          }}
        >
          {props.roleList.map((item) => (
            <Option
              value={item.id}
              key={item.id}
              disabled={checkRoleDisabled(item)}
            >
              {item.roleName}
            </Option>
          ))}
        </Select>
      </Form.Item>
    </Form>
  );
});

export default UserForm;
